package com.lzgcoding.onlineshopapp.feature.main.dashboard.component

import androidx.compose.animation.AnimatedContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import com.lzgcoding.onlineshopapp.room.entity.BannerEntity
import com.lzgcoding.onlineshopapp.ui.theme.Green
import com.lzgcoding.onlineshopapp.ui.theme.LargePadding
import com.lzgcoding.onlineshopapp.ui.theme.MediumPadding

@Composable
fun SwiperWidget(
    banners: List<BannerEntity>
) {
    AnimatedContent(
        targetState = banners.isEmpty()
    ) { target ->
        if (target) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(240.dp)
                    .padding(horizontal = LargePadding)
                    .padding(top = MediumPadding),
                contentAlignment = Alignment.Center
            ) {
                CircularProgressIndicator()
            }
        } else {
            val pager = rememberPagerState { banners.size }
            Column {
                HorizontalPager(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(240.dp)
                        .padding(horizontal = LargePadding)
                        .padding(top = MediumPadding),
                    state = pager
                ) { index ->
                    AsyncImage(
                        model = banners[index].url,
                        contentDescription = "swiper_$index",
                        modifier = Modifier
                            .fillMaxSize()
                            .clip(RoundedCornerShape(LargePadding)),
                        contentScale = ContentScale.FillWidth
                    )
                }

                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = MediumPadding),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(
                        MediumPadding,
                        Alignment.CenterHorizontally
                    )
                ) {
                    repeat(banners.size) { index ->
                        Box(
                            Modifier
                                .width(if (index == pager.currentPage) 22.dp else 10.dp)
                                .height(10.dp)
                                .clip(CircleShape)
                                .background(
                                    if (index == pager.currentPage) Green else Color(
                                        0xFFe3e2e7
                                    )
                                )
                        )
                    }
                }
            }
        }
    }
}